<template>
	<div class='container'>
		<div class="list">
			<draggable tag="ul" :list="list1" item-key="key" :group="{ name: 'dragGroup', pull: 'clone', put: false }"
				:sort="false">
				<template #item="{ element }">
					<li class="list-item">
						{{ element.name }}
					</li>
				</template>
			</draggable>
		</div>
		<div class="list">
			<draggable :list="list2" item-key="key" v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 300 }"
				tag="ul" :component-data="{ name: 'fade' }" handle=".drag-handler" @add="onDragAdd">
				<template #item="{ element }">
					<li class="list-item">
						{{ element.name }}
					</li>
				</template>
			</draggable>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';


const list1 = ref([
	{
		key: '1',
		name: '节点1'
	},
	{
		key: '2',
		name: '节点2'
	}
])
const list2 = ref([
	{
		key: '3',
		name: '节点3'
	},
	{
		key: '4',
		name: '节点4'
	}
])

const onDragAdd = (val) => {
	console.log(val);
}
</script>
<style lang='less' scoped>
.container {
	display: flex;
	gap: 20px;

	.list {
		border: 1px solid #eee;

		.list-item {
			background: #fff;
			padding: 5px;
			border: 1px solid #eee;
		}

		.ghost {
			// content: '';
			font-size: 0;
			height: 3px;
			box-sizing: border-box;
			background: red;
			border: 2px solid red;
			// outline-width: 0;
			padding: 0;
			overflow: hidden;
		}
	}
}
</style>
